<template>
  <div>
    <div class="BigDiv" v-for="(val, index) in payArr" :key="index" v-if="!noneRecord" >
      <div class="flexCenter timeTextCss" v-if="new Date(val.beginTime.replace(/-/g,'/')) > new Date(val.createTime.replace(/-/g,'/'))" >{{val.beginTime}}</div>
      <div class="flexCenter timeTextCss" v-if="new Date(val.beginTime.replace(/-/g,'/')) <= new Date(val.createTime.replace(/-/g,'/'))" >{{val.createTime}}</div>
      <div class="titleDivCss" >
        <div class="titleBigDiv" >
          <img src="@/assets/img/pay/newIn.png" v-if="val.recordCollectionState == 2"  class="newInImgCss" >
          <img src="@/assets/img/pay/end.png" v-if="val.recordCollectionState == 3"  class="newInImgCss" >
          <div style="font-size: 0.32rem; font-weight: bold; " >{{val.recordCollectionSchoolFees_Name}}</div>
          <img src="@/assets/img/pay/new.png" class="newImgCss" v-if="!val.read" >
        </div>
        <div class="textCss" >
          缴费截止时间：{{val.endTime}}
        </div>
        <div class="moneyDivCss" >
          <span class="moneyTextCss" >缴纳金额: {{val.currency}}元</span>
          <div v-if="val.recordCollectionSchoolFees_SettleState == 0" >
            <button type="default" class="moneyButtonCss" v-if="val.payState != 1" @click="payClick(val)" >缴 费</button>
            <button type="default" class="moneyButtonCss-2" v-if="val.payState == 1" disabled >已 缴</button>
          </div>
        </div>
      </div>
    </div>

    <div class="noneCss2" v-if="noneRecord"  >
      <span>暂无记录</span>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import {initiatePayment, paymentRefresh} from '@/api/payApi'
import cookie from '@/util/cookie'
import {loginUrl} from '@/config/config'
export default {
  props: {
    payArr: '',
    noneRecord: ''  // 无记录提示
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      childList: state => state.user.childList
    })
  },
  mounted() {

  },
  methods: {
    // 缴费按钮触发事件
    async payClick (e) {
      let params = {
        tradeType: 2,
        openId: cookie.get('OpenId'),
        id: e.id
      }

      try {
        let val = await initiatePayment(params)
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
             "appId": val.jsapi_appid,     //公众号名称，由商户传入
             "timeStamp":val.jsapi_timestamp,         //时间戳，自1970年以来的秒数
             "nonceStr":val.jsapi_noncestr, //随机串
             "package":val.jsapi_package,
             "signType":val.jsapi_signtype,         //微信签名方式：
             "paySign": val.jsapi_paysign //微信签名
            },
            function(res){
              // alert(JSON.stringify(res));
              // this.$router.push('/menu/index')
              if(res.err_msg == "get_brand_wcpay_request:ok" ){
                this.$vux.toast.text('支付成功', 'middle')
                window.location.href = loginUrl
              } else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
                alert('支付已取消')
                this.$emit('cancel')
              }
         });
      }
      // 支付成功，不能重复支付
      catch (err) {
        if (err == '订单已完成，不能重复支付' || err == '支付成功，不能重复支付') {
          let res = await paymentRefresh(params)
          this.$emit('costEmit')
          this.$vux.toast.text('该订单已支付', 'middle')
        } else {
          this.$vux.toast.text('抱歉，该订单超出微信支付限额', 'middle')
        }
      }
    }
  }
}
</script>

<style scoped lang="less" >
.noneCss2 {
  width: 100%;
  display: flex;
  justify-content:center;
  margin-top: 1rem;
  font-size: 0.4rem;
}

.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.BigDiv {
  width: 6.8rem;
  height: 3.18rem;
  margin: 0.3rem 0.2rem;
}

.titleBigDiv {
  width: 6.8rem;
  height: 1.2rem;
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.newInImgCss {
  width: 0.87rem;
  height: 0.46rem;
  margin: 0.1rem 0.2rem 0 0.3rem;
}

.newImgCss {
  width: 0.4rem;
  height: 0.24rem;
  margin: 0.1rem 0.2rem 0 0.1rem;
}

.timeTextCss {
  width: 6.8rem;
  height: .5rem;
  font-size: 12px;
  color: #999;
}

.titleDivCss {
  width: 6.8rem;
  height: 2.68rem;
  background: #fff;
}

.textCss {
  width: 6.5rem;
  height: 0.4rem;
  margin-left: 0.3rem;
  display: flex;
  align-items: center;
}

.moneyDivCss {
  width: 6.8rem;
  height: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.moneyTextCss {
  margin: 0 0.5rem 0 0.3rem;
  font-size: 0.28rem;
}

.moneyButtonCss {
  width: 1.65rem;
  height: 0.6rem;
  margin-right: 0.5rem;
  border: 0;
  border-radius: 0.3rem;
  font-size: 0.28rem;
  background: #0085DE;
  color: #fff;
}

.moneyButtonCss-2 {
  width: 1.65rem;
  height: 0.6rem;
  margin-right: 0.5rem;
  border: 0;
  border-radius: 0.3rem;
  font-size: 0.28rem;
  background: #cde4ec;
  color: #fff;
}

</style>
